<template>
  <div class="app-container">
    <div style="margin-bottom:10px;">
      <el-select v-model="query.imanager" clearable style="margin-right:10px;" placeholder="请选职位类型" class="filter-item" filterable>
        <el-option label="主管" value="1" />
        <el-option label="员工" value="0" />
      </el-select>
      <el-input v-model="query.realName" placeholder="真实姓名" style="margin-right:10px;width:220px" />
      <el-input v-model="query.loginName" placeholder="用户名" style="margin-right:10px;width:220px" />
      <el-input v-model="query.depName" placeholder="部门" style="margin-right:10px;width:220px" />
      <el-input v-model="query.higerLoginName" placeholder="上级姓名" style="margin-right:10px;width:220px" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getInfor">
        {{ $t('table.search') }}
      </el-button>
    </div>

    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;margin-bottom: 20px;" row-key="id" highlight-current-row border>
      <el-table-column type="index" label="序号" sortable width="80" />

      <el-table-column prop="companyId" label="公司名" sortable />
      <el-table-column prop="loginName" label="用户名" sortable />
      <el-table-column prop="realName" label="真实姓名" sortable />
      <el-table-column prop="depName" label="部门" />
      <el-table-column prop="noeach" label="参加互评状态" sortable>
        <template slot-scope="{row,$index}">
          <span v-if="row.noeach==1">不参加</span>
          <span v-if="row.noeach==0">参加</span>
        </template>
      </el-table-column>
      <el-table-column prop="imanager" label="职位类型" sortable>
        <template slot-scope="{row,$index}">
          <span v-if="row.imanager=='0'">员工</span>
          <span v-if="row.imanager=='1'">主管</span>
        </template>
      </el-table-column>
      <el-table-column prop="titleName" label="职位" sortable />
      <el-table-column prop="ilevel" label="层级" sortable />
      <!--<el-table-column prop="higerLoginName" label="上级用户名" sortable />-->

      <el-table-column :label="$t('table.actions')" align="center" width="480px">
        <template slot-scope="{row,$index}">
          <!--<el-button type="primary" size="mini"  @click="handleEdit(row)" >{{ $t('table.edit') }}</el-button>-->
          <el-button size="mini" type="primary" @click="add1(row, $index)">
            {{ $t('table.addNext') }}
          </el-button>
          <el-button size="mini" type="primary" @click="generatePerformance(row, $index)">
            {{ $t('table.generatePerformance') }}
          </el-button>
          <!--<el-button size="mini" type="danger" @click="handleDelete(row, $index)">   {{ $t('table.delete') }}</el-button>-->
        </template>

      </el-table-column>

    </el-table>
    <el-pagination
      style="margin-top:20px;"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      title="生成绩效评估"
      :visible.sync="dialogVisible1"
      width="40%"
      :before-close="handleClose"
    >
      <el-form ref="ruleForm2" :model="picidata" label-width="100px" label-position="left" :rules="rules2">

        <el-form-item label="绩效批次" prop="yearMonth">
          <el-input v-model="picidata.yearMonth" placeholder="请填写绩效批次" style="margin-right:10px;width:220px" />
        </el-form-item>
        <el-form-item label="评审关系" prop="hupingma">
          <el-radio-group v-model="picidata.hupingma">
            <el-radio label="1">仅被评</el-radio>
            <el-radio label="2">互相评</el-radio>
          </el-radio-group>
        </el-form-item>

        <div style="text-align:right;">
          <el-button type="danger" @click="dialogVisible1=false">
            {{ $t('permission.cancel') }}
          </el-button>
          <el-button type="primary" @click="submitPici">
            {{ $t('permission.confirm') }}
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="dialogType"
      :visible.sync="dialogVisible"
      width="40%"

      :before-close="handleClose"
    >
      <el-form ref="ruleForm" :model="user" label-width="100px" label-position="left" :rules="rules">
        <el-form-item label="公司名">
          <el-input v-model="user.companyId" placeholder="请填写公司名" style="width: 230px" />
        </el-form-item>
        <el-form-item label="用户名" prop="loginName">

          <el-select
            v-model="user.realName"
            style="width: 230px"
            filterable
            placeholder="请选择用户名"
            @change="getdata"
          >
            <el-option
              v-for="(item,index) in users"
              :key="index"
              :label="item.realName+' '+item.tel"
              :value="{'value':index,'tel': item.tel,'realName':item.realName}"
            />
          </el-select>
          <!--<el-input v-model="user.loginName" placeholder="用户名" style="width: 230px" />-->
        </el-form-item>

        <el-form-item label="部门" prop="depName">
          <el-input v-model="user.depName" placeholder="请填写部门" style="width: 230px" />
        </el-form-item>

        <el-form-item label="" prop="imanager">
          <el-radio v-model="user.imanager" label="0">员工</el-radio>
          <el-radio v-model="user.imanager" label="1">主管</el-radio>
        </el-form-item>
        <el-form-item label="">
          <el-radio v-model="user.noeach" label="1">不参加互评</el-radio>
          <el-radio v-model="user.noeach" label="0">参加互评</el-radio>
        </el-form-item>
        <el-form-item label="职位" prop="titleName">
          <el-input v-model="user.titleName" placeholder="请填写职位" style="width: 230px" />
        </el-form-item>
        <el-form-item v-if="dialogType!=='新增'" label="层级" prop="ilevel">
          <el-input v-model="user.ilevel" placeholder="请填写层级" style="width: 230px" disabled />
        </el-form-item>

        <el-form-item v-if="dialogType!=='新增'" label="上级用户名">
          <el-input v-model="loginName" disabled placeholder="请填写上级用户名" style="width: 230px" />
        </el-form-item>

      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">
          {{ $t('permission.cancel') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ $t('permission.confirm') }}
        </el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import { getList as getUserList } from '@/api/user'
import { deepClone, refreshArr, arraryRemove } from '../../../utils'
import { orderAdd, infor, del, higerLoginName, addEvaluate } from '@/api/personelManagement'
import { getInfo } from '@/api/managerPerformance'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
const defaultUser = {
  companyId: '',
  loginName: '',
  realName: '',
  depName: '',
  titleName: '',
  ilevel: '',
  imanager: '',
  // higerLoginName: '',
  noeach: '',
  id: ''
}

const defaultUserNext = {
  fromloginname: '',
  tologinname: ''
}
const defaultUser1 = {
  hupingma: '',
  yearMonth: '',
  loginnames: ''
}
export default {
  name: 'Customerforecast',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      total: 0,
      loginName: '',
      list: [],
      picidata: Object.assign({}, defaultUser1),
      userNext: Object.assign({}, defaultUserNext),
      rulesNext: {
        tologinname: [
          { required: true, message: '请选择用户', trigger: 'blur' }
        ]

      },
      rules2: {
        hupingma: [
          { required: true, message: '请选择评审关系', trigger: 'blur' }
        ],
        yearMonth: [
          { required: true, message: '请填写批次', trigger: 'blur' }
        ]

      },
      rules: {
        loginName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        depName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        titleName: [
          { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        ilevel: [
          { required: true, message: '请输入层级', trigger: 'blur' }
        ],
        noeach: [
          { required: true, message: '请选择参与状态', trigger: 'blur' }
        ],
        imanager: [
          { required: true, message: '请选择参是否是管理者', trigger: 'blur' }
        ]
      },
      user: Object.assign({}, defaultUser),
      dialogType: '新增',
      dialogTypeNext: 'new',
      currentPage: 1,
      pagesize: 10,
      tableData: [],
      user: {

      },
      query: {

      },
      dialogVisible1: false,
      dialogVisible: false,
      dialogVisibleNext: false
    }
  },
  mounted() {
    this.getInfor()
    this.getpici()
    this.getUserList()
  },
  methods: {
    getdata(e) {
      console.log(e)
      this.user.loginName = e.tel
      this.user.realName = e.realName + ' ' + e.tel
    },
    getUserList() {
      getUserList().then((res) => {
        console.log('user', res)
        this.users = res.data
      })
    },
    getpici() {
      getInfo().then((res) => {
        this.list = res.data
      })
    },
    generatePerformance(row, $index) {
      this.dialogVisible1 = true
      this.picidata = Object.assign({}, defaultUser1),
      this.picidata.loginnames = row.loginName
    },
    addNext(row, $index) {
      this.userNext = Object.assign({}, defaultUserNext)
      this.userNext.fromloginname = row.loginName
      this.dialogVisibleNext = true
    },
    async  handleDelete(row, $index) {
      this.$confirm('确认删除?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = {
          id: row.id
        }
        await del(obj)
        this.getInfor()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(err => console.error(err))
    },
    handleEdit(row) {
      this.dialogType = '编辑'
      this.dialogVisible = true

      this.user = deepClone(row)
      this.user.imanager = row.imanager + ''
      this.user.noeach = row.noeach + ''
    },
    handleSizeChange: function(size) {
      this.pagesize = size
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    getInfor() {
      this.currentPage = 1
      infor(this.query).then((res) => {
        this.tableData = res.data
        this.total = res.data.length
      })
    },
    add() {
      this.user = Object.assign({}, defaultUser)
      this.dialogType = '新增'
      this.dialogVisible = true
    },
    add1(row, index) {
      console.log(row)
      const obj = deepClone(row)
      this.user = Object.assign({}, defaultUser)
      this.loginName = obj.loginName

      this.user.ilevel = obj.ilevel + 1
      this.loginName = obj.loginName
      this.user.higerLoginName = obj.loginName
      this.dialogType = '添加下级'
      this.dialogVisible = true
    },
    submitNext() {
      this.$refs.ruleForm1.validate((valid) => {
        if (valid) {
          higerLoginName(this.userNext).then((res) => {
            if (!res.isSuccess) {
              this.$message({
                type: 'warning',
                message: res.message
              })
            } else {
              this.$message({
                type: 'success',
                message: '提交成功!'
              })
              this.dialogVisibleNext = false
            }
            this.getInfor()
          })
        }
      })
    },
    submitPici() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          addEvaluate(this.picidata).then((res) => {
            if (!res.isSuccess) {
              this.$message({
                type: 'warning',
                message: res.message
              })
            } else {
              this.$message({
                type: 'success',
                message: '提交成功!'
              })
              this.dialogVisible1 = false
            }
            this.getInfor()
          })
        }
      })
    },
    submit() {
      if (this.dialogType == '新增') {
        this.user.ilevel = 1
        // this.user.higerLoginName=0;
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          orderAdd(this.user).then((res) => {
            if (!res.isSuccess) {
              this.$message({
                type: 'warning',
                message: res.message
              })
            } else {
              this.$message({
                type: 'success',
                message: '提交成功!'
              })
              this.dialogVisible = false
            }
            this.getInfor()
          })
        }
      })
    }
  }
}
</script>
